<template>
  <div class="recommend">
    <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
<div v-for="(item,index) in list" class="recommend-item" :key="index">
  <!-- 
99  有视频，有购买链接   detail 
1 article 内容详情
3 article 文章详情
6 question 问题
100 detail买家秀  1article 内容详情
533 vote 投票详情
   -->
        <ArticleItem 
        v-if="item.content.content_type===3"
        :id="item.content.id"
        :nickname="item.content.nickname"
        :icon="item.content.icon"
        :content_type="item.content.content_type"
        :title="item.content.title"
        :content="item.content.content"
        :pic_list="item.content.pic_list"
        :video_list="item.content.video_list"
        :tag_list="item.content.tag_list"
        :hot_comment="item.content.hot_comment"
        :comment_num="item.content.comment_num"
        :praise_num="item.content.praise_num"
        />
<!--问题 -->
        <QuestionItem  
        v-else-if="item.content.content_type===6"
        :q_id="item.content.question.q_id"
        :content_type="item.content.content_type"
        :question="item.content.question.question"
        :answer_num="item.content.question.answer_num"
        :praise_num="item.content.question.praise_num"
        :tag_list="item.content.tag_list"
        :answer_list_v2="item.content.question.answer_list_v2"
       
        />
        <!-- 100 detail买家秀  1article 内容详情 -->
       <DetailItem v-else-if="item.content.content_type===1||item.content.content_type===100"
        :id="item.content.id"
        :nickname="item.content.nickname"
        :icon="item.content.icon"
        :content_type="item.content.content_type"
        :content="item.content.content"
        :pic_list="item.content.pic_list"
        :tag_list="item.content.tag_list"
        :hot_comment="item.content.hot_comment"
        :comment_num="item.content.comment_num"
        :praise_num="item.content.praise_num"
   
       />
       <!-- 投票 -->
        <!-- <VoteItem v-else-if="item.content.content_type===5"
        :id="item.content.id"
        :nickname="item.content.nickname"
        :icon="item.content.icon"
        :content_type="item.content.content_type"
        :content="item.content.content"
        :hot_comment="item.content.hot_comment"
        :comment_num="item.content.comment_num"
        :praise_num="item.content.praise_num"
        :title="item.content.title"
        :vote_detail="item.content.vote_detail"

        /> -->
        <!-- 测评 -->
        <TestItem
        v-else-if="item.content.content_type===99"
        :id="item.content.id"
        :nickname="item.content.nickname"
        :icon="item.content.icon"
        :content_type="item.content.content_type"
        :content="item.content.content"
        :video_list="item.content.video_list"
        :tag_list="item.content.tag_list"
        :hot_comment="item.content.hot_comment"
        :comment_num="item.content.comment_num"
        :praise_num="item.content.praise_num"
        />
       <!-- <div v-if="item.rec_type===0">
        我是话题
       </div> -->
    </div>


  <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
</van-list>




  </div>
</template>

<script setup lang="ts">
import ArticleItem from '../../../views/find/findItem/recommendItem/ArticleItem.vue'
import DetailItem from '../../../views/find/findItem/recommendItem/DetailItem.vue'
import QuestionItem from '../../../views/find/findItem/recommendItem/QuestionItem.vue'
import TestItem from '../../../views/find/findItem/recommendItem/TestItem.vue'
import VoteItem from '../../../views/find/findItem/recommendItem/VoteItem.vue'
import { onMounted,ref ,onBeforeUnmount ,nextTick} from 'vue';
import { getRecommendMData } from '../../../api/find'
import { contentM } from '../../../typings'
let list = ref<Array<contentM>>([]);
let n = ref(1);
onMounted(() => {
  getData(n.value);
  loading.value = false;
  
})
const getData = async (n: number) => {
      let res = await getRecommendMData(n);
     list.value = [...list.value, ...res.data.rec_list];
  }
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  setTimeout(() => {
    getData(n.value);
    nextTick(() => {
      loading.value = false;
      n.value += 1;
        })
        if (list.value.length >= 1000) {
          finished.value = true;
        }
      }, 1200);
};
    onBeforeUnmount (()=>{
      onLoad();
    }
)
</script>

<style scoped lang="scss">
.recommend {
  background-color: #f6f6f6;
  // min-height: 10rem;
  // position: fixed;
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 100vw;
  // overflow: scroll;
  // padding-bottom: .5rem;


}
.recommend-item {
 margin-bottom: .4rem;
}

</style>